<template>
  <view class="goods-nav bg-white flex-between" :style="{backgroundColor: bgColor}">
    <view class="goods-nav--left flex">
      <view
          class="goods-nav--left--item"
          v-for="(item,idx) in leftOption"
          :key="idx "
          @click="leftClick(idx, item)"
      >
        <xl-icon :name="item.selected ? item.iconSelected || item.icon : item.icon" :size="21" :color="item.selected ? item.colorSelected || $xl.global?.themeColor || '#0081ff' : item.color || defaultFontColor"></xl-icon>
        <text class="goods-nav--left--item--text" >{{item.selected ? item.textSelected || item.text : item.text}}</text>
      </view>
    </view>
    <view class="goods-nav--right" :style="{'margin-left': btnType === 'merge' ? '20rpx':0}">
      <xl-button
          v-for="(item,idx) in rightOption"
          :key="idx"
          :textColor="item.color"
          :color="item.bgColor"
          :disabled="item.disabled"
          shape="circle"
          style="flex: 1;"
          :customStyle="btnStyle(idx)"
          @click="rightClick(idx, item)"
      >{{ item.text }}</xl-button>
    </view>
  </view>
  <view class="gap"></view>
</template>

<script setup>
import { ref } from 'vue'
import propsData from './props.js'
const props = defineProps(propsData)

const defaultFontColor = ref('#333')

function btnStyle(index){
  if (props.btnType === 'merge') {
    if (index == 0) return "border-top-right-radius: 0;border-bottom-right-radius: 0;font-size: 30rpx;font-weight:bold;height:72rpx;";
    else if(index == props.rightOption.length-1) return "border-top-left-radius: 0;border-bottom-left-radius: 0;font-size: 30rpx;font-weight:bold;height:72rpx;";
    else "border-radius: 0;font-size: 30rpx;font-weight:bold;height:72rpx;";
  } else {
    return "font-size: 30rpx;font-weight:bold;margin-left: 20rpx;height:72rpx;";
  }
}

const emits = defineEmits(['leftClick', 'rightClick'])

function leftClick(cur, item) {
  emits('leftClick', cur, item)
}

function rightClick(cur) {
  emits('rightClick', cur)
}
</script>

<style scoped lang="scss">
.gap {
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  background-color: transparent;
}
.goods-nav {
  box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
  /* #ifndef APP-PLUS-NVUE */
  box-sizing: border-box;
  z-index: 990;
  /* #endif */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  &--left {
    height: 70rpx;
    padding-left: 10rpx;
    &--item {
      width: 90rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      &--text {
        margin-top: 4rpx;
        font-size: 22rpx;
        color: #666;
      }
    }
  }
  &--right {
    height: 90rpx;
    margin-right: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    &--item {
      height:70rpx;
      &--text {
        font-size: 28rpx;
        font-weight: 700;
      }
      &:active {
        opacity: 0.9;
      }
    }
  }
}
.mr-2{
  margin-right: 20rpx;
}
</style>
